<template>
  <div class="home-container" ref="homeContainerRef">
    <!-- 欢迎词模块 -->
    <div class="welcome-module">
      <div class="user-info">
        <div class="avatar-wrapper">
          <img :src="user.avatar" alt="User Avatar" class="user-avatar">
        </div>
        <div class="name-wrapper">
          <span class="user-name">{{ user.name }}</span>
        </div>
      </div>
      <h1>{{ welcomeMessage }}</h1>
      <p>{{ weatherInfo }}</p>
    </div>

    <!-- 日历模块 -->
    <div class="calendar-module">
      <a-calendar :value="currentDate" :fullscreen="false" @select="onDateSelect" mode="month" />
    </div>

    <!-- 通知模块 -->
    <div class="notification-module">
      <div class="module-header">
        <h2>通知</h2>
        <a href="#" @click.prevent="handleMoreNotifications" v-if="showMoreNotifications">更多通知</a>
      </div>
      <ul class="list-container">
        <li v-for="(notification, index) in notifications.slice(0, 10)" :key="index" @click="handleNotificationClick(notification)">
          {{ notification }}
        </li>
      </ul>
    </div>

    <!-- 代办消息模块 -->
    <div class="todo-module">
      <div class="module-header">
        <h2>代办消息</h2>
        <a href="#" @click.prevent="handleMoreTodos" v-if="showMoreTodos">更多消息</a>
      </div>
      <ul class="list-container">
        <li v-for="(todo, index) in todos.slice(0, 10)" :key="index" @click="handleTodoClick(todo)">
          {{ todo }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, computed } from 'vue';
import moment from 'moment';

// 当前日期，转换为 Moment 对象
const currentDate = ref(moment());

// 处理日期选择
const onDateSelect = (date: moment.Moment) => {
  currentDate.value = date;
};

// 通知数据
const notifications = ref([
  '系统将于今晚 12 点进行维护，请提前做好准备。',
  '新的版本已发布，点击查看更新内容。',
  '明日有重要会议，请提前做好准备。',
  '本周任务进度需尽快更新。',
  '项目文档已更新，请及时查看。',
  '部门聚餐活动安排在本周五。',
  '系统新功能上线，欢迎体验。',
  '请及时提交本月工作总结。',
  '技术培训课程将于下周开展。',
  '客户反馈问题需尽快处理。',
  '新的合作机会已出现，请关注。'
]);

// 代办消息数据
const todos = ref([
  '完成项目报告',
  '参加下午 3 点的会议',
  '与客户沟通项目进度',
  '整理本周工作资料',
  '测试新功能',
  '提交报销申请',
  '跟进项目审批流程',
  '安排团队内部会议',
  '准备技术分享资料',
  '处理紧急客户问题',
  '制定下周工作计划'
]);

// 天气数据（模拟）
const weather = ref({
  city: '北京',
  condition: '晴',
  temperature: 25
});

// 用户信息
const user = ref({
  name: '张三',
  avatar: 'https://example.com/avatar.jpg' // 替换为实际的头像链接
});

// 获取 home-container 元素的引用
const homeContainerRef = ref<HTMLElement | null>(null);

// 根据时间生成欢迎词
const getWelcomeMessage = () => {
  const currentHour = new Date().getHours();
  if (currentHour >= 5 && currentHour < 12) {
    return `早上好，${user.value.name}！新的一天充满无限可能，加油开启高效工作吧！`;
  } else if (currentHour >= 12 && currentHour < 18) {
    return `中午好，${user.value.name}！保持专注，午间的努力会让你离目标更近一步！`;
  } else {
    return `晚上好，${user.value.name}！夜晚的宁静是思考和突破的好时机，放手去干吧！`;
  }
};

const welcomeMessage = computed(() => getWelcomeMessage());

// 天气信息
const weatherInfo = computed(() => `当前 ${weather.value.city} 的天气是 ${weather.value.condition}，温度 ${weather.value.temperature}°C。`);

onMounted(() => {
  // 页面加载完成后，调用设置高度的函数
  setWelcomeAndCalendarHeight();

  // 监听窗口大小变化事件，当窗口大小改变时重新设置高度
  window.addEventListener('resize', setWelcomeAndCalendarHeight);
});

const setWelcomeAndCalendarHeight = () => {
  nextTick(() => {
    if (homeContainerRef.value) {
      // 获取内容可用区域的高度
      const containerHeight = homeContainerRef.value.offsetHeight;
      // 降低高度占比，减少欢迎词和日历模块高度
      const targetHeightRatio = 0.3;
      const targetHeight = containerHeight * targetHeightRatio;

      // 获取日历模块的元素
      const calendarModule = homeContainerRef.value.querySelector('.calendar-module') as HTMLElement | null;
      // 获取欢迎模块的元素
      const welcomeModule = homeContainerRef.value.querySelector('.welcome-module') as HTMLElement | null;

      if (calendarModule && welcomeModule) {
        // 设置日历模块的高度
        calendarModule.style.height = `${targetHeight}px`;
        // 设置欢迎模块的高度与日历模块相同
        welcomeModule.style.height = `${targetHeight}px`;
      }
    }
  });
};

// 处理通知点击事件
const handleNotificationClick = (notification: string) => {
  console.log('点击了通知：', notification);
};

// 处理更多通知点击事件
const handleMoreNotifications = () => {
  console.log('点击了更多通知');
};

// 处理代办消息点击事件
const handleTodoClick = (todo: string) => {
  console.log('点击了代办消息：', todo);
};

// 处理更多代办消息点击事件
const handleMoreTodos = () => {
  console.log('点击了更多代办消息');
};

// 判断是否显示更多通知
const showMoreNotifications = computed(() => notifications.value.length > 10);

// 判断是否显示更多代办消息
const showMoreTodos = computed(() => todos.value.length > 10);
</script>

<style scoped lang="less">
/* 设置整体背景和布局 */
.home-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 20px; /* 增加模块之间的间距 */
  padding: 30px; /* 增加页面整体的内边距 */
  background: linear-gradient(135deg, #e6f7ff, #f0faff);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;

  /* 平板电脑样式 */
  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
  }

  /* 手机端样式 */
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

/* 欢迎词模块样式 */
.welcome-module {
  grid-column: 1 / 4;
  grid-row: 1;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px; /* 增加模块内部的内边距 */
  text-align: center;

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .avatar-wrapper {
    margin-bottom: 10px;
  }

  .user-avatar {
    width: 100px; /* 增大头像尺寸 */
    height: 100px;
    border-radius: 50%;
  }

  .name-wrapper {
    text-align: center;
  }

  .user-name {
    font-size: 20px; /* 增大用户名的字体大小 */
    font-weight: bold;
    color: #333;
  }

  h1 {
    font-size: 32px; /* 增大欢迎词的字体大小 */
    color: #1890ff;
    margin-bottom: 10px;
  }

  p {
    font-size: 18px; /* 增大天气信息的字体大小 */
    color: #666;
  }

  /* 平板电脑样式 */
  @media (max-width: 1024px) {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  /* 手机端样式 */
  @media (max-width: 768px) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* 日历模块样式 */
.calendar-module {
  grid-column: 4 / 5;
  grid-row: 1;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px; /* 增加模块内部的内边距 */

  .ant-picker-calendar {
    width: 100%;
    height: 100%; /* 确保日历填满包裹容器 */
    overflow: auto; /* 当内容超出时显示滚动条 */
  }

  /* 平板电脑样式 */
  @media (max-width: 1024px) {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  /* 手机端样式 */
  @media (max-width: 768px) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* 通知模块和代办消息模块公共样式 */
.notification-module,
.todo-module {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px; /* 增加模块内部的内边距 */

  .module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* 增加标题和列表之间的间距 */
  }

  h2 {
    font-size: 22px; /* 增大标题的字体大小 */
    color: #333;
    margin: 0;
  }

  a {
    color: #1890ff;
    text-decoration: none;
  }

  .list-container {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* 计算十条消息的高度，假设每条消息的上下内边距为 8px，字体大小为 14px，下边框为 1px */
    max-height: calc(10 * (8px + 14px + 1px));
    overflow: hidden;
  }

  li {
    position: relative;
    padding: 8px 0 8px 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #555;

    &::before {
      content: '•';
      position: absolute;
      left: 0;
      color: #555;
    }
  }

  /* 平板电脑样式 */
  @media (max-width: 1024px) {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  /* 手机端样式 */
  @media (max-width: 768px) {
    grid-column: 1;
    grid-row: auto;
  }
}

.notification-module {
  grid-column: 1 / 3;
  grid-row: 2;
}

.todo-module {
  grid-column: 3 / 5;
  grid-row: 2;
}
</style>